﻿* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

:root {
    --main-bg-color: #000;
    --nav-bg: rgb(38,39,40);
    --f-list-bg: rgb(27,27,27);
    --font-color: #fff;
    --content-header: rgba(97,97,97,.3);
    --flex-message: rgb(38,38,38);
    --flex-reverse-font: #fff;
    --flex-reverse-message: rgb(38,38,38);
    --ipt: rgb(17,17,17);
    --active-color: #363330;
    --f-active-color: #363330;
}

.main {
    overflow: hidden;
}

.left-nav {
    width: 85px;
    height: 100vh;
    background-color: var(--nav-bg);
    color: var(--font-color); 
}

    .left-nav .avatar {
        margin-top: 30px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .left-nav .avatar img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

    .left-nav ul {
        margin-top: 20px;
        align-items: center;
    }

        .left-nav ul li {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px 0;
        }

            .left-nav ul li.active {
                background-color: var(--active-color);
            }

            .left-nav ul li i {
                font-size: 20px;
            }

            .left-nav ul li:hover {
                background-color: var(--active-color);
            }

.f-list {
    height: 100vh;
    overflow-y: auto;
    padding: 0;
    background-color:var(--f-list-bg);
}

    .f-list::-webkit-scrollbar {
        width: 10px;
    }

    /* 滚动条滑块 */
    .f-list::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: var(--f-list-bg);
    }

    /* 滚动条轨道 */
    .f-list::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background-color: var(--f-list-bg);
    }

    .f-list .f-list-col {
        background-color: var(--f-list-bg);
        overflow-y: auto;
    }

    .f-list .f-list-top .f-tongzhi{
        padding:15px 15px;
        color:#fff;
        display:flex;
        justify-content:space-between;
    }

        .f-list .f-list-top .f-tongzhi:hover {
            background-color: dimgray;
        }

        .f-list .f-list-col .f-list-contact {
            padding: 15px 10px;
            display: flex;
        }
            .f-list .f-list-col .f-list-contact.active {
                background-color: var(--f-active-color);
            }

            .f-list .f-list-col .f-list-contact:hover {
                background-color: dimgray;
            }
            .f-list .f-list-col .f-list-contact .pic img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                object-fit: cover;
                margin-left: 5px;
            }
            .f-list .f-list-col .f-list-contact .contact-info {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-left:10px;
            }

                .f-list .f-list-col .f-list-contact .contact-info .info-top {
                    font-size: 18px;
                    color: var(--font-color);
                }

                .f-list .f-list-col .f-list-contact .contact-info .info-online {
                    width: 200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 14px;
                    color: #ccc;
                }


        .f-list .f-list-col .f-list-col-item {
            padding: 15px 10px;
            display: flex;
            justify-content: space-around;
        }

            .f-list .f-list-col .f-list-col-item.active {
                background-color: var(--f-active-color);
            }

            .f-list .f-list-col .f-list-col-item:hover {
                background-color:dimgray;
            }

            .f-list .f-list-col .f-list-col-item.active .msg .msg-top{
                color:#fff;
            }

            .f-list .f-list-col .f-list-col-item .pic img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                object-fit: cover;
                margin-left: 5px;
            }

            .f-list .f-list-col .f-list-col-item .msg {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }

                .f-list .f-list-col .f-list-col-item .msg .msg-top {
                    font-size: 18px;
                    color: var(--font-color);
                }

                .f-list .f-list-col .f-list-col-item .msg .msg-bottom {
                    width: 150px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 14px;
                    color: #ccc;
                }

            .f-list .f-list-col .f-list-col-item .time {
                color: #ccc;
                font-size: 12px;
                min-width:127px;
            }

.chat-main {
    padding: 0;
    flex: 1;
    height: 100vh;
    position: relative;
    margin-left:-5px;
}

    .chat-main .pic-qq {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .chat-main .content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        background-color: var(--ipt);
        position: absolute;
        top: 100%;
        left: 100%;
    }

        .chat-main .content .content-header {
            padding-left:10px;
            margin-top: 20px;
            padding-bottom: 10px;
            color: #dedbdb;
            font-size: 15px;
            border-bottom: 1px solid var(--ipt);
        }

        .chat-main .content .content-main {
            display: flex;
            flex-direction: column;
            height: 60%;
            margin-top: 12px;
            position: relative;
            overflow-y: auto;
        }


.content-main::-webkit-scrollbar {
    width: 10px;
}

/* 滚动条滑块 */
.content-main::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-color:rgb(142, 137, 137);
}

/* 滚动条轨道 */
.content-main::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: var(--f-list-bg);
}

            .chat-main .content .content-main .flex {
                margin: 10px 0 10px 10px;
                width: fit-content;
                display: flex;
                align-items: center;
            }

                .chat-main .content .content-main .flex .time {
                    width: 200px;
                    position: absolute;
                    left: 40%;
                    align-self:flex-start;
                    text-align: center;
                    color: rgb(97,97,97);
                    font-size:14px;
                }

                .chat-main .content .content-main .flex .avatar {
                    width: 35px;
                    height: 35px;
                    object-fit: cover;
                    border-radius: 50%;
                }

                .chat-main .content .content-main .flex .message {
                    margin-left: 6px;
                    max-width: 300px;
                    padding: 15px;
                    border-radius: 10px;
                    background-color: var(--flex-message);
                    color: var(--font-color);
                    word-wrap: break-word;
                    white-space: pre-line;
                }

            .chat-main .content .content-main .flex-reverse {
                display: flex;
                margin: 10px 10px 10px 0;
                flex-direction: row-reverse;
                width: fit-content;
                align-items: center;
                align-self: flex-end;
            }

                .chat-main .content .content-main .flex-reverse .time {
                    width: 200px;
                    position: absolute;
                    left: 40%;
                    text-align: center;
                    align-self: flex-start;
                    color: rgb(97,97,97);
                    font-size: 14px;
                }

                .chat-main .content .content-main .flex-reverse .avatar {
                    width: 35px;
                    height: 35px;
                    object-fit: cover;
                    border-radius: 50%;
                }

                .chat-main .content .content-main .flex-reverse .message {
                    margin-right: 6px;
                    max-width: 300px;
                    padding: 15px;
                    border-radius: 10px;
                    background-color: var(--flex-reverse-message);
                    color: var(--flex-reverse-font);
                    white-space: pre-line;
                    word-wrap: break-word;
                }

        .chat-main .content .content-footer {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
        }

            .chat-main .content .content-footer .icons {
                border-top: 1px solid #ccc;
                padding:5px 0 0 0;
                color:#fff;
                font-size:17px;
            }
            .chat-main .content .content-footer .icons i{
                margin:0 5px;
            }

            .chat-main .content .content-footer .ipt {
                border: none;
                width: 100%;
                height: 150px;
                line-height: 1;
                background-color: var(--ipt);
                color: var(--font-color);
                padding: 15px 30px 15px 15px;
                resize: none;
            }

                .chat-main .content .content-footer .ipt:focus {
                    outline: none;
                }

            .chat-main .content .content-footer .btn {
                background-color:rgb(0,153,255);
                width: 80px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }

            .chat-main .content .content-footer .img {
                color: #fff;
                font-size: 20px;
                position: absolute;
                right: 15px;
                top: 10px;
            }
/* WebKit browsers (Chrome, Safari) */
textarea::-webkit-scrollbar {
    width: 8px; /* 宽度 */
}

textarea::-webkit-scrollbar-thumb {
    background-color: #888; /* 滚动条的滑块颜色 */
    border-radius: 6px; /* 滚动条的滑块圆角 */
}

textarea::-webkit-scrollbar-track {
    background-color: rgb(17,17,17); /* 滚动条的轨道颜色 */
}

@keyframes likeAnimation {
    0% {
        opacity: 1;
        transform: scale(1);
        top:0;
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translateY(-100px) scale(2);
        top:-100px;
    }
}
